<ion-header>
    <ion-navbar>
        <ion-title><b>申请详情</b></ion-title>
    </ion-navbar>
</ion-header>

<ion-content style="background-color: #EFEFEF;">
    <ion-grid>
        <ion-row style="margin:5px;background-color:#FFFFFF;" align-items-center>
            <ion-col col-1>
                <img src="assets/imgs/detail.png"/>
            </ion-col>
            <ion-col col-5>
                <span style="font-family: PingFangSC-Semibold;font-size: 18px;color: #333333;letter-spacing: 0;text-align: right;line-height: 18px;">
                    {{apply.applyHumanName}}
                </span>
            </ion-col>
            <ion-col col-6>
                <div  style="background-color:#F7F7F7;border-radius:3px;">
                    <ion-row>
                        <ion-col>
                            <div style="font-family: PingFangSC-Regular;font-size: 12px; color: #999999;letter-spacing: 0;line-height: 12px;">
                                申请单号
                            </div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <div style="font-family: PingFangSC-Regular;font-size: 16px;color: #333333;letter-spacing: 0;line-height: 16px;">
                                {{task.taskNum}}
                            </div>
                        </ion-col>
                    </ion-row>
                </div>
            </ion-col>
        </ion-row>
        
        <ion-row style="margin:5px;background-color:#FFFFFF;" align-items-center>
            <ion-col col-6 style="text-align: center;">
                <p style="font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #04C260;
                letter-spacing: 0;
                line-height: 14px;">申请日期</p>
                <p class="detail-date">{{apply.applyDate}}</p>
            </ion-col>
            <ion-col col-6 style="text-align: center;border-left:2px solid #DCDCDC;">
                <p style="font-family: PingFangSC-Regular;font-size: 14px;color: #FD9D20;letter-spacing: 0;line-height: 14px;">
                    最后截止日期
                </p>
                <p class="detail-date">{{task.finishDate}}</p>
            </ion-col>
        </ion-row>

        <!-- 申请状态 -->
        <ion-row style="margin:5px;background-color:#FFFFFF;" align-items-center>
            <ion-col col-12>
                <ion-row style="border-bottom: 1px solid #DCDCDC;">
                    <ion-col col-1>
                        <span style="border-right: 9px solid #3A90F6;border-radius: 7px;"></span>
                    </ion-col>
                    <ion-col col-11>
                        <span style="font-family: PingFangSC-Semibold;
                        font-size: 16px;
                        color: #333333;
                        letter-spacing: 0;
                        line-height: 16px;">申请状态</span>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col col-12>
                        <div class="stepInfo">
                            <div>
                                <span></span><span></span><span></span><span></span>
                            </div>
                            <div class="stepIco stepIco1 {{process[0]}}">
                                <div class="stepTopText ">服装管理人员审批</div>
                                <div class="stepBottomText">{{apply.firstApprovalDate}}</div>
                            </div>
                            <div class="stepIco stepIco2 {{process[1]}}">
                                <div class="stepTopText">办公室主任审批</div>
                                <div class="stepBottomText">{{apply.secondApprovalDate}}</div>
                            </div>
                            <div class="stepIco stepIco3 {{process[2]}}">
                                <div class="stepTopText">采购中</div>
                                <div class="stepBottomText"></div>
                            </div>
                            <div class="stepIco stepIco4 {{process[3]}}">
                                <div class="stepTopText">采购完成</div>
                                <div class="stepBottomText">{{apply.purchaseDate}}</div>
                            </div>
                            <div class="stepIco stepIco5 {{process[4]}}">
                                <div class="stepTopText">已领取</div>
                                <div class="stepBottomText">{{apply.recievedDate}}</div>
                            </div>
                        </div>
                    </ion-col>
                </ion-row>
            </ion-col>
        </ion-row>

        <!-- 申请服装明细 -->
        <ion-row style="margin:5px;background-color:#FFFFFF;" align-items-center>
            <ion-col col-12>
                <ion-row style="border-bottom: 1px solid #DCDCDC;">
                    <ion-col col-1>
                        <span style="border-right: 9px solid #3A90F6;border-radius: 7px;"></span>
                    </ion-col>
                    <ion-col col-11>
                        <span style="font-family: PingFangSC-Semibold;
                        font-size: 16px;
                        color: #333333;
                        letter-spacing: 0;
                        line-height: 16px;">申请明细</span>
                    </ion-col>
                </ion-row>
                <ng-container *ngFor="let material of materialList" >
                    <ion-row style="border-bottom: 1px solid #DCDCDC;">
                        <ion-col col-1></ion-col>
                        <ion-col col-7>
                            <span class="detail-list" style="color: #333333;">{{material.materialName}}</span>
                        </ion-col>
                        <ion-col col-2 style="text-align: center;">
                            <span class="detail-list" style="color: #333333;">{{material.materialIndexs}}</span>
                        </ion-col>
                        <ion-col col-2 style="text-align: center;">
                            <span class="detail-list" style="color: #3A90F6;">{{material.materialCount}}</span>
                            <span class="detail-list" style="color: #333333;">件</span>
                        </ion-col>
                    </ion-row>
                </ng-container>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>